<template>
  <div>
    <div>
    <span>this is a todo list</span>
    </div>
    <div>
      <input v-model="inputValue"
      @keyup.enter="submit"/>
      <button  @click="submit">提交</button>
    </div>
  <ol>
    <li v-for="(item ,index) in list"
    :key="index"
    @click="deleteHandle(index)">{{item}}</li>
  </ol>
  </div>
</template>

<script>
export default {
  name: 'todolist',
  data () {
    return {
      inputValue: '',
      list: []
    }
  },
  methods: {
    submit () {
      if (this.inputValue !== '' && this.inputValue !== null) {
        this.list.push(this.inputValue)
        this.inputValue = ''
      }
    },
    deleteHandle (index) {
      this.list.splice(index, 1)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  div{
    margin-top: 10px;
  }
</style>
